<template>
  <view>
    <u-tabs
      :list="tabList"
      :current="currentIndex"
      @change="changeTab"
      line-color="#6bc29b"
      :scrollable="false"
    ></u-tabs>
    <!--    商品列表 -->
    <view class="p-12 flex-col gap-12">
      <GoodsItem
        v-for="(item, index) in dataList"
        :data="item"
        :key="index"
      ></GoodsItem>
      <u-empty
        v-if="dataList.length == 0"
        mode="data"
        marginTop="20px"
        text="暂无商品"
      ></u-empty>
    </view>
  </view>
</template>

<script>
import { fetchMiActivityList, fetchMiActivityGooodsList } from "@/services/api";
import GoodsItem from "./goods-item.vue";
export default {
  name: "goodsRecommendedation",
  components: {
    GoodsItem,
  },
  props: {},
  data() {
    return {
      tabList: [
        {
          name: "今日主推",
          value: "3",
        },
        {
          name: "即将结束",
          value: "1",
        },
        {
          name: "优惠券活动",
          value: "2",
        },
      ],
      timeData: {},
      dataList: [],
      // 当前活动的项
      currentIndex: 0,
      currentValue: "3",
      // 推荐列表
      recommendList: [],
    };
  },
  async created() {
    // await this.getMiActivityGooodsList()
  },
  methods: {
    changeTab(e) {
      console.log("当前", e);
      let { index, value } = e;
      this.current = index;
      this.currentValue = value;
      return;
      // tab切换查询根据活动类型查询商品是查询活动
      if (value == 3) {
        // 查询今日主推荐
        this.getMiActivityGooodsList();
      } else if (value == 1) {
        this.getList();
        this.dataList = [];
      } else if (value == 2) {
        this.getMiActivityGooodsList();
      }
    },
    async getList() {
      const { data, error } = await fetchMiActivityList({
        category: this.currentValue,
        // 活动类型：1、客户活动 2、商户活动
        type: "1",
      });
      if (!error) {
        console.log("数据是", data);
        this.dataList = data;
      }
    },
    async getMiActivityGooodsList() {
      const { data, error } = await fetchMiActivityGooodsList({
        category: this.currentValue,
      });
      if (!error) {
        console.log("商品数据是", data);
        this.dataList = data?.goodsList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.good-item {
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border-radius: 16rpx;
  position: relative;

  .coupon {
    width: 702rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    position: absolute;
    top: 320rpx;
    height: 80rpx;
    line-height: 50rpx;
    background: linear-gradient(to right, #df4843, #ea9d56);
  }
}
</style>
